<template>
	<div class="app">

		<slider :sonlist="list"></slider><!-- 使用子 组件,把父 list 传给 子sonlist -->
		
		<div class="mui-content">
		        <ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 "><router-link to="/new/">
		                    <span class="mui-icon mui-icon-home"></span>
		                    <div class="mui-media-body">新闻资讯</div></router-link></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 "><router-link to="/photo/">
		                    <span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
		                    <div class="mui-media-body">图片分享</div></router-link></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 "><router-link to="/goods/">
		                    <span class="mui-icon mui-icon-chatbubble"></span>
		                    <div class="mui-media-body">商品购买</div></router-link></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 "><router-link to="/new/newlist/">
		                    <span class="mui-icon mui-icon-location"></span>
		                    <div class="mui-media-body">留言反馈</div></router-link></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 "><router-link to="/new/newlist/">
		                    <span class="mui-icon mui-icon-search"></span>
		                    <div class="mui-media-body">视频专区</div></router-link></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 "><router-link to="/new/newlist/">
		                    <span class="mui-icon mui-icon-phone"></span>
		                    <div class="mui-media-body">联系我们</div></router-link></li>
		           
		        </ul> 
		</div>
  </div>
</template>

<script>
import slider from "../puclicson/slider.vue"  /*父导入 子 组件*/
import commit from "../../kits/commit.js"/*引入api 主机名*/
export default {

  data () {
    return {
       msg: '首页',
//    list: [{
//			 	url: 'http://www.itcast.cn/subject/phoneweb/index.html',
//			 	img: 'http://ofv795nmp.bkt.clouddn.com/vuelogobanner1.jpg'
//		    }, {
//			 	url: 'http://www.itcast.cn/subject/phoneweb/index.html',
//			 	img: 'http://ofv795nmp.bkt.clouddn.com/vuelogobanner2-1.jpg'
//			}]
		list:[]
    }
 },
 created(){
 	this.getLB()
 },
 methods:{
 	getLB(){
 		var url = commit.api+"/api/getlunbo";
 		this.$http.get(url).then(res=>{
   			this.list = res.body.message;
 			
 		},res=>{
 			console.log(res.body);
 		})
 			
 	}
 },
 components:{
 	"slider":slider  /* 使用子 组件, 定义html中的标签*/
 }
}
</script>

<style scoped>
 
.mui-grid-view.mui-grid-9{
	background-color: #fff;
	border-top: 0;
    border-left:0;
}

.mui-grid-view.mui-grid-9 .mui-table-view-cell{
	 border-right: 0; 
     border-bottom: 0; 
}
.mui-icon{
	width: 50px;
	height: 50px;
}
.mui-icon-home:before,
.mui-icon-email:before,
.mui-icon-location:before,
.mui-icon-search:before,
.mui-icon-phone:before,
.mui-icon-chatbubble:before{
	content: '';
}
  	            
.mui-icon-home{
	background-image: url(../../../statics/images/menu10.png);
	background-repeat: round;
}
.mui-icon-email{
	background-image: url(../../../statics/images/menu3.png);
	background-repeat: round;
}
.mui-icon-location{
	background-image: url(../../../statics/images/menu4.png);
	background-repeat: round;
}
.mui-icon-search{
	background-image: url(../../../statics/images/menu5.png);
	background-repeat: round;
}
.mui-icon-phone{
	background-image: url(../../../statics/images/menu6.png);
	background-repeat: round;
}
.mui-icon-chatbubble{
	background-image: url(../../../statics/images/menu9.png);
	background-repeat: round;
}



</style>
